<template>
  <customContainer ref="customContainerRef" :config="config" />
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, computed } from 'vue'
import { Download, Edit, Bottom } from '@element-plus/icons-vue'
import { ElButton, ElMessage } from 'element-plus'
import { DictDirection } from '@/store/modules/dicts'

const customContainerRef = ref(null),
  // 非单个禁用
  single = ref(true),
  // 非多个禁用
  multiple = ref(true),
  {
    appContext: {
      config: {
        globalProperties: { $download, $validateForm },
      },
    },
  } = getCurrentInstance()
const queryParams = ref({})

const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  single.value = rows.length != 1
  multiple.value = !rows.length
}
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '客户单号',
            prop: 'waybillNo',
            option: {
              placeholder: '请输入客户单号',
              type: 'textarea',
            },
          },
          {
            label: '主转单号',
            prop: 'mainTransferNo',
            option: {
              type: 'textarea',
            },
          },
          {
            label: '次转单号',
            prop: 'subcontractNo',
            option: {
              type: 'textarea',
            },
          },
          {
            label: '提单号',
            prop: 'ladingNo',
            option: {
              type: 'textarea',
            },
          },
          {
            type: 'select',
            label: '客户名称',
            prop: 'customerCode',
            option: {
              dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            type: 'date-picker',
            label: '下单时间',
            prop: 'orderDate',
            option: {
              type: 'date',
              valueFormat: 'YYYY-MM-DD',
            },
          },
          {
            type: 'date-picker',
            label: '反馈时间',
            prop: 'orderDate1',
            option: {
              type: 'date',
              valueFormat: 'YYYY-MM-DD',
            },
          },
          {
            type: 'select',
            label: '反馈状态',
            prop: 'feedbackStatus',
            option: {
              dictInfo: { dict: DictDirection.运输类型 },
            },
          },
          {
            type: 'select',
            label: '运输类型',
            prop: 'transportType',
            option: {
              dictInfo: { dict: DictDirection.运输类型 },
            },
          },
        ],
        queryParams: queryParams.value,
        formOption: {},
      },
      btns: [
        {
          title: '批量处理问题件',
          disabled: multiple.value,
          type: 'success',
          icon: Edit,
          onclick: handleUpdates,
        },
        {
          title: '导出',
          directive: [['hasPermi', ['system:problemPiece:export']]],
          onclick: handleExport,
          type: 'warning',
          icon: Bottom,
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          {
            label: '客户名称',
            prop: 'customerName',
            width: '100',
            align: 'center',
          },
          { label: '客户单号', align: 'center', prop: 'waybillNo', width: '120' },
          { label: '主转单号', align: 'center', prop: 'mainTransferNo', width: '120' },
          { label: '次转单号', align: 'center', prop: 'subcontractNo', width: '120' },
          { label: '提单号', align: 'center', prop: 'ladingNo', width: '120' },
          { label: '物流类型', align: 'center', prop: 'logisticsType' },
          { label: '状态代码', align: 'center', prop: 'statusCode', width: '120' },
          { label: '状态说明', align: 'center', prop: 'statusEscription', width: '120' },
          { label: '物流更新时间', align: 'center', prop: 'occurrenceDate', width: '120' },
          { label: '备注', align: 'center', prop: 'remarks' },
          { label: '订单下单时间', align: 'center', prop: 'orderDate', width: '100' },
          { label: '内部备注', align: 'center', prop: 'internalRemarks' },
          { label: '客户是否反馈', align: 'center', prop: 'custDesc' },
          { label: '客户反馈时间', align: 'center', prop: 'custDate', width: '120' },
          { label: '已发邮件', align: 'center', prop: 'hairEmailDate', width: '100' },
          { label: '已回邮件', align: 'center', prop: 'backEmailDate', width: '100' },
          { label: '客户资料', align: 'center', prop: 'submitDataDate', width: '120' },
          { label: '索赔书', align: 'center', prop: 'claimDate', width: '60' },
          { label: '已索赔', align: 'center', prop: 'alreadyClaimed', width: '60' },
          { label: '已ups确认', prop: 'confirmedUps', width: '100' },
          { label: '预计起飞日', prop: 'expectedSailingDate' },
          // { label: '预计开船日', prop: 'expectedSailingDate' },
          { label: '账号方确认', align: 'center', prop: 'accountConfirmation', width: '100' },
          { label: '已赔款', align: 'center', prop: 'compensationPaid', width: '60' },
          {
            label: '操作',
            align: 'center',
            width: '360',
            fixed: 'right',
            showOverflowTooltip: false,
            render(h, params) {
              const buttons = [
                {
                  title: '处理问题件',
                  icon: Edit,
                  clickFun: handleUpdate,
                },
                {
                  title: '下载索赔书',
                  icon: Download,
                  clickFun: handleDownloadClaLet,
                },
              ]
              return buttons.map((el) => h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  icon: el.icon,
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              ))
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleSelectionChange(rows)
          },
        },
      },
      api: '',
      customKey: 'express/mainBusiness/overseaLocation/overSeaOrderInfo',
    }
  },
  set(val) {
    return val
  },
})
</script>